<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\..\node_modules\vue\dist\vue.js"></script>
    <script src="..\..\node_modules\vue-router\dist\vue-router.js"></script>
</head>
<body>
<div id="app">
    <p>nested / push / name / redirect</p>
    <router-link :to="{name:'pp' , params:{ppid:100}}">to pp 100</router-link>

    <button v-on:click="p_push(1)">p_push(1)</button>
<!--    <button v-on:click="pp_push(1)">pp_push(1)</button>-->
    <button v-on:click="c_push(2)">c_push(2)</button>

    <router-view></router-view>
</div>
</body>
<script type="application/javascript">
    const P = {
        template:
            `
<div>
p id : {{$route.params.id}}
<p>nested router</p>
<router-link to="/p/1/c/101">c-101</router-link>
<router-link to="/p/2/c/102">c-102</router-link>
<router-link to="/p/100">/p/100 redirect to pp</router-link>
<router-link to="/p/101">/p/101 redirect to pp</router-link>
<router-view></router-view>
</div>
`
    };

    const C = { template: '<div>c id : {{$route.params.cid}}</div>' };

    const PP = { template: '<div>this is a pp</div>' };

    const router = new VueRouter({
        routes:[
            {
                path:'/p/100',
                redirect: '/pp/1000'
            },
            {
                path:'/p/101',
                redirect: to => {
                    //本例中path的route对象。
                    console.log(to);
                    return '/pp/1000';
                }
            },
            {
                path: '/p/:id',
                name:'p' ,
                component: P ,
                children:[
                    {
                        path:'c/:cid',
                        component:C
                    }
                ]
            },
            {
                path:'/pp/:ppid',
                name:'pp',
                component: PP
            }
        ]
    });

    const app = new Vue({
        router,
        data:{
        },
        methods:{
            //使用path后，忽略params。
            p_push:function (pid){
                //多行文本具有模板功能。
                //this.$router.push({ path:`/p/${pid}`});
                //onComplete有一个入参，是最新的路由信息。
                //onAbort有一个入参，是相同hash的异常信息。
                this.$router.push(
                    { name:'p',params:{id:pid}} ,
                    function(r){
                        console.log("complete");},
                    function (r){
                        console.log("abort");
                    }
                );
            },
            c_push:function (cid){
                //this.$route有当前路由的信息。
                var p = this.$route.path + "/c/" + cid;
                this.$router.push({ path: p});
            }
        },
        beforeCreate: function () {
            console.log("life cycle : beforeCreate");
        },
        created: function () {
            console.log("life cycle : created");
        },
        beforeMount: function () {
            console.log("life cycle : beforeMount");
        },
        mounted: function () {
            console.log("life cycle : mounted");
        },
        beforeUpdate: function () {
            console.log("life cycle : beforeUpdate");
        },
        updated: function () {
            console.log("life cycle : updated");
        },
        beforeDestroy: function () {
            console.log("life cycle : beforeUpdate");
        },
        destroyed: function () {
            console.log("life cycle : updated");
        }
    }).$mount('#app');

</script>
</html>
